<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue-Style-Guide | 智慧气象前端文档</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="/logo.ico">
    <meta name="description" content="xingen">
    <link rel="preload" href="/assets/css/0.styles.2e2f3b38.css" as="style"><link rel="preload" href="/assets/js/app.58c8569b.js" as="script"><link rel="preload" href="/assets/js/2.8394c773.js" as="script"><link rel="preload" href="/assets/js/4.a734d6eb.js" as="script"><link rel="prefetch" href="/assets/js/3.b2ad5e44.js"><link rel="prefetch" href="/assets/js/5.bf36f885.js"><link rel="prefetch" href="/assets/js/6.4a5214af.js"><link rel="prefetch" href="/assets/js/7.c18e44e2.js"><link rel="prefetch" href="/assets/js/8.29606cb9.js"><link rel="prefetch" href="/assets/js/9.30e791e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.2e2f3b38.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">智慧气象前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/project/api.html" class="nav-link">
  项目介绍
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端编码风格" class="dropdown-title"><span class="title">前端编码风格</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/vue-style.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue风格
</a></li><li class="dropdown-item"><!----> <a href="/standard/es-style.html" class="nav-link">
  ES6风格
</a></li></ul></div></div><div class="nav-item"><a href="/git-standard/branch-mag.html" class="nav-link">
  Git开发流程管理
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/project/api.html" class="nav-link">
  项目介绍
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端编码风格" class="dropdown-title"><span class="title">前端编码风格</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/vue-style.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue风格
</a></li><li class="dropdown-item"><!----> <a href="/standard/es-style.html" class="nav-link">
  ES6风格
</a></li></ul></div></div><div class="nav-item"><a href="/git-standard/branch-mag.html" class="nav-link">
  Git开发流程管理
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Vue-Style-Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/standard/vue-style.html#项目结构介绍" class="sidebar-link">项目结构介绍</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/standard/vue-style.html#vue-属性书写顺序" class="sidebar-link">Vue 属性书写顺序</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/standard/vue-style.html#组件" class="sidebar-link">组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/standard/vue-style.html#命名" class="sidebar-link">命名</a></li><li class="sidebar-sub-header"><a href="/standard/vue-style.html#vue-组件的书写顺序" class="sidebar-link">Vue 组件的书写顺序</a></li><li class="sidebar-sub-header"><a href="/standard/vue-style.html#组件引用" class="sidebar-link">组件引用</a></li></ul></li><li><a href="/standard/vue-style.html#事件" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-style-guide"><a href="#vue-style-guide" class="header-anchor">#</a> Vue-Style-Guide</h1> <h2 id="项目结构介绍"><a href="#项目结构介绍" class="header-anchor">#</a> 项目结构介绍</h2> <p><img src="/assets/img/vue-tree.50ee3c82.png" alt="An image"></p> <h2 id="vue-属性书写顺序"><a href="#vue-属性书写顺序" class="header-anchor">#</a> Vue 属性书写顺序</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  mixins<span class="token punctuation">,</span>
  data<span class="token punctuation">,</span>
  props<span class="token punctuation">,</span>
  store<span class="token punctuation">,</span>
  computed<span class="token punctuation">,</span>
  route<span class="token punctuation">,</span>
  created<span class="token punctuation">,</span>
  ready<span class="token punctuation">,</span> <span class="token comment">// =&gt; 生命周期顺序不赘述</span>
  event<span class="token punctuation">,</span>
  watch<span class="token punctuation">,</span>
  components<span class="token punctuation">,</span>
  methods<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="组件"><a href="#组件" class="header-anchor">#</a> 组件</h2> <h3 id="命名"><a href="#命名" class="header-anchor">#</a> 命名</h3> <ul><li>组件命名使用大驼峰</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 在单文件组件和字符串模板中 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponents</span> <span class="token punctuation">/&gt;</span></span>

  <span class="token comment">&lt;!-- 在 DOM 模板中 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-components</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-components</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> MyComponents <span class="token keyword">from</span> <span class="token string">&quot;./MyComponents.vue&quot;</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span>
      MyComponents<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>JS 文件命名</li></ul> <div class="language- extra-class"><pre class="language-text"><code>名使用分隔符线  resize-event.js
</code></pre></div><ul><li>CSS 样式命名</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>box-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>box_content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="vue-组件的书写顺序"><a href="#vue-组件的书写顺序" class="header-anchor">#</a> Vue 组件的书写顺序</h3> <p>建议：template script style 的顺序书写</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="组件引用"><a href="#组件引用" class="header-anchor">#</a> 组件引用</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> myComponentsA <span class="token keyword">from</span> <span class="token string">&quot;./myComponentsA.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> myComponentsB <span class="token keyword">from</span> <span class="token string">&quot;./myComponentsB.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> myComponentsC <span class="token keyword">from</span> <span class="token string">&quot;./myComponentsC.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> myComponentsD <span class="token keyword">from</span> <span class="token string">&quot;./myComponentsD.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    myComponentsA<span class="token punctuation">,</span>
    myComponentsB<span class="token punctuation">,</span>
    myComponentsC<span class="token punctuation">,</span>
    myComponentsD<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- bad --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>pass()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>pass<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- good --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>pass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>pass<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.58c8569b.js" defer></script><script src="/assets/js/2.8394c773.js" defer></script><script src="/assets/js/4.a734d6eb.js" defer></script>
  </body>
</html>
